/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="head">
			<!-- 订单表 -->
			<view class="table">
				<view class="table-body">
					<view class="tr">
						<view class="td label">
							订单单号:
						</view>
						<view class="td">
							{{orderInfo.order_sn}}
						</view>
					</view>
					<view class="tr">
						<view class="td label">
							订单进度:
						</view>
						<view class="td">
							取消处理
						</view>
					</view>
					<view class="tr">
						<view class="td label">
							订单总额:
						</view>
						<view class="td">
							￥{{orderInfo.total_amount}}
						</view>
					</view>
					<view class="tr trbox">
						<view class="td label">
							取消进度:
						</view>
						<view class="td" v-if="orderInfo.pay_status==1">
                              亲爱的客户，我们正在为您处理中，请耐心等待。
						</view>
						<view class="td" v-if="orderInfo.pay_status==2" >
							 亲爱的客户,订单已完成，{{orderInfo.admin_note}}
						</view>
						<view class="td" v-if="orderInfo.pay_status==3">
							 亲爱的客户,订单审核失败，原因：{{orderInfo.admin_note}}
						</view>
					</view>
				</view>
			</view>
			<!-- 进度条 -->
			<image class="progress" :src="'user/progress-bar-'+orderInfo.pay_status+'.png'"></image>
		</view>
		<view class="body">
			<view class="title">
				申请单详情信息
			</view>
			<view class="table">
				<view class="table-body">
					<view class="tr">
						<view class="td label">
							订单编号
						</view>
						<view class="td">
							{{orderInfo.order_sn}}
						</view>
					</view>
					<view class="tr">
						<view class="td label">
							取消原因
						</view>
						<view class="td">
							{{orderInfo.user_note}}
						</view>
					</view>
					<view class="tr">
						<view class="td label">
							联系方式
						</view>
						<view class="td">
							{{orderInfo.mobile}}
						</view>
					</view>
					<view class="tr status">
						<view class="td label">
							支付明细
						</view>
						<view class="td">
							<view class="priceBox">
								<text>支付明细</text><text class="price">￥{{orderInfo.total_amount}}</text>
							</view>
							<view class="priceBox">
								<text>余额支付</text><text class="price">￥{{orderInfo.user_money}}</text>
							</view>
							<view class="priceBox">
								<text>积分抵扣</text><text class="price">￥{{orderInfo.integral_money}}</text>
							</view>
							<view class="priceBox">
								<text>优惠劵</text><text class="">￥{{orderInfo.coupon_price==0?'0.00':orderInfo.coupon_price}}</text>
							</view>
							<view class="priceBox">
								<text>其他支付</text><text class="">￥{{orderInfo.order_amount==0?'0.00':orderInfo.order_amount}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="title">
				退款明细状态详解
			</view>
			<text>1、已退：商城已完成退款处理，实际退款时间以到账时间为准。</text>
			<text>2、待退：订单含有未退款项，待系统处理，请您耐心等待。</text>
			<text>3、未退：商城劵发生拆分是不予返还、商城劵、手机红包请您联系客服处理。</text>
		</view>
	</view>
</template>

<script>
	import {getOrderInfo} from "@/api/api.js";
	export default {
		data() {
			return {
				orderInfo:"",//订单信息
			};
		},
		onLoad(options){
			console.log(options)
			let params={
				order_sn:options.order_sn
			}
			this.getOrderInfo(params)
		},
		methods:{
			getOrderInfo(params){
				getOrderInfo(params).then(res=>{
					console.log(res)
					this.orderInfo=res
				})
			}
		}
	}
</script>

<style lang="scss">
	.table{
		margin-left: 20rpx;
		margin-right: 20rpx;
		
		border: 1rpx solid #CCCCCC;
		.tr+.tr{
			border-top: 1rpx solid #CCCCCC;
		}
		.tr{
			display: flex;
			flex-direction: row;
			align-items: center;
			
		}
		.status{
			.td{
				height: auto;
				border-left: 1rpx solid #CCCCCC;
			}
			.label{
				border-right: none;
			}
			.price{
				color: #e23435;
			}
		}
		.trbox{
			flex-direction: column;
			align-items: flex-start;
			.label{
				border-right:none;
			}
		}
		.priceBox{
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 26rpx;
			color: #333333;
		}
		.label{
			width: 180rpx;
			border-right: 1rpx solid #CCCCCC;
		}
		.label+.td{
			padding-left: 10rpx;
		}
		.td{
			height: 54rpx;
			color: #333333;
			font-size: 26rpx;
			text-align: center;
			line-height: 54rpx;
		}
	}
	.title{
		padding-top: 20rpx;
		margin-bottom: 20rpx;
		color: #333333;
		font-size: 26rpx;
		text-align: center;
	}
	.progress{
		display: block;
		margin: 20rpx auto 0;
		padding-bottom: 20rpx;
		width: 556rpx;
		height: 68rpx;
	}
	.head,.bottom,.body{
		background: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.bottom{
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.bottom .title{
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #CCCCCC;
	}
	.bottom text{
		display: block;
		color: #666;
		font-size: 24rpx;
	}
</style>
